<!--
 * @Description:
 * @Author: 猪脚饭
 * @Date: 2022-11-16 16:21:31
 * @LastEditors: Xeni
 * @LastEditTime: 2022-11-17 22:18:28
-->
<template>
  <div class="category-container">
    <el-carousel :interval="4000" type="card" height="300px">
      <el-carousel-item v-for="item in list" :key="item.id">
        <img style="width: 100%; height: 100%;" :src="item.url" alt="pic">
      </el-carousel-item>
    </el-carousel>
    <div class="type">
      <div @click="$router.push(`/property/''/${item.id}/''`)" v-for="item in category" :key="item.id" class="item">
        <div class="content">
          <i class="iconfont icon-fangzidichan"></i>
          <h3>{{ item.title }}</h3><span>( {{item.properties.length}}间 )</span>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
    <el-row type="flex" justify="center" style="background: #f0f2f4;">
      <el-pagination style="margin-top: 25px;" :page-size="params._limit" layout="prev, pager, next" :total="total" @current-change="currentChange">
      </el-pagination>
    </el-row>
    <FooterIndex />
  </div>
</template>

<script>
import { getCategoryList, getCategoryCount } from '@/api/category'
export default {
  name: 'CategoryIndex',
  data() {
    return {
      list: [
        { id: 1, url: require('@/assets/common/11.png') },
        { id: 2, url: require('@/assets/common/12.png') },
        { id: 3, url: require('@/assets/common/13.png') },
        { id: 4, url: require('@/assets/common/14.png') },
        { id: 5, url: require('@/assets/common/15.png') }
      ],
      params: {
        _start: 0,
        _limit: 4
      },
      category: [],
      total: 0
    }
  },
  activated() {
    // 只要组件被激活了，就重新初始化信息
    this.getCategoryList()
  },
  methods: {
    // 获取分类数据
    async getCategoryList() {
      this.category = await getCategoryList(this.params)
      this.total = await getCategoryCount()
    },
    // 分页
    currentChange(newPage) {
      this.params._start = (newPage - 1) * this.params._limit
      this.getCategoryList()
    }
  }
}
</script>

<style lang="scss" scoped>
.category-container {
  background: #f0f2f4;
  height: 100%;
  .el-pagination {
    margin-bottom: 200px;
    padding-top: 30px;
  }
  .content {
    font-size: 20px;
    i {
      font-size: 30px;
      color: #ffa500;
    }
    h2 {
      color: black;
    }
    span {
      font-size: 15px;
      color: grey;
    }
    .desc {
      font-size: 18px;
      color: #ffa500;
      margin-top: 8px;
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.type {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background: #fefefe;
    text-align: center;
  }
}
</style>
